<template>
	<div>
    <!-- v-text文本指令，更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。 -->
    <h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <!-- Vue脚手架支持自闭合标签 -->
		<School ref="sch"/> 
    <!-- 在School组件中比较ref和id -->
		<School id="schid"/> 
	</div>
</template>

<script>
/**
 * 02_ref属性
 */
//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
    // 数据区
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
    // 方法区
		methods: {
			showDOM(){
        // 方法1 给h1标签一个id="title"，调用原生DOM操作获取元素
        // console.log(document.getElementById("title"));
        // 方法2 使用ref="title",替代id原生DOM操作
        console.log("输出当前组件实例对象:",this); //输出当前组件实例对象
				console.log("真实DOM元素",this.$refs.title) //真实DOM元素
				console.log("真实DOM元素:",this.$refs.btn) //真实DOM元素
				console.log("School组件的实例对象:",this.$refs.sch) //School组件的实例对象（vc）
        console.log("在School组件中比较ref和id",document.getElementById("schid")) //获取到School组件中原生DOM

        // 总结：ref用来给元素或子组件打标识，类似id属性。在后面组件通信中，获取组件的实例对象是多么重要。
			}
		},
	}
</script>
